<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>霓虹聊天室 - 登录</title>
    <link rel="stylesheet" href="/static/css/login.css">
    <link rel="stylesheet" href="/static/js/layer/theme/default/layer.css">
    <script src="/static/js/jquery-3.7.1.min.js"></script>
    <script src="/static/js/layer/layer.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/vue.global.js"></script>
</head>
<body>
    <div class="login-container">
        <!-- 装饰性背景元素 -->
        <div class="bg-glow bg-glow-1"></div>
        <div class="bg-glow bg-glow-2"></div>

        <div class="login-card">
            <h1 class="neon-title">霓虹聊天室</h1>
            <p class="tagline">连接夜晚的声音</p>

            <form class="login-form">
                <div class="input-group">
                    <label for="username">
                        <i class="fa fa-user"></i>
                    </label>
                    <input type="text" id="username" placeholder="用户名" v-model="user.username">
                </div>

                <div class="input-group">
                    <label for="password">
                        <i class="fa fa-lock"></i>
                    </label>
                    <input type="password" id="password" placeholder="密码" v-model="user.password">
                </div>

                <div class="form-options">
                    <label class="custom-checkbox remember-me">
                        <input type="checkbox" @change="rememberMe">
                        <span class="checkmark"></span>
                        <span>记住我</span>
                    </label>
                    <a href="#" class="forgot-password">忘记密码?</a>
                </div>

                <button type="button" class="login-btn neon-btn" @click="enter">登录</button>

                <div class="register-prompt">
                    还没有账号? <a href="{% url 'register' %}" class="neon-link">立即注册</a>
                </div>
            </form>
        </div>
    </div>
</body>
<script>
    Vue.createApp({
        data(){
            return{
                user:{
                    username:'',
                    password:'',
                    remember:false
                }
            }
        },
        methods:{
            rememberMe(){
                this.remember = !this.remember;
            },
            enter(){
                if(this.user.username === ''){
                    layer.msg('用户名不允许为空')
                    return
                }
                if(this.user.password === ''){
                    layer.msg('密码不允许为空')
                    return
                }
                axios.post("{% url 'login' %}",this.user,{
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(ret => {
                    if(ret.data.code === 200){
                    layer.msg(ret.data.msg,{time:1000},()=>{
                        window.location.href='/'
                    })
                }else{
                    layer.msg(ret.data.msg)
                }
                })
            }
        }
    }).mount('.login-container')
</script>
</html>